<html>

<head>
  <meta charset="utf-8">
  <title>实验预约</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top:20px">
  <legend style="margin:0px auto">实验预约表</legend>
</fieldset>


<form class="layui-form" style="width:1200px;margin:0px auto">
  <div class="layui-form-item">
    <label class="layui-form-label">预约时间</label>
    <div class="layui-inline">
      <input type="text" name="eDate" lay-verify="required" class="layui-input" id="eDate" placeholder="请选择日期">
    </div>
  </div>

  <div class="layui-input-inline">
    <label class="layui-form-label">预约时间段</label>
    <div class="layui-input-inline">
      <div>
        <p style="color:red">
          <font size="1">说明:每一个小方块代表从显示button时间开始之后的一个小时(如9:00代表9:00-10:00,未开放时间不可选,只可选取连续时间段)</font>
        </p>
      </div>
      
      <div>
        <div class="layui-row">
            <div class="layui-btn-group">
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=0>00:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=1>00:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=2>01:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=3>01:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=4>02:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=5>02:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=6>03:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=7>03:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=8>04:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=9>04:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=10>05:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=11>05:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=12>06:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=13>06:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=14>07:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=15>07:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=16>08:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=17>08:30</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=18>09:00</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=19>09:30</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=20>10:00</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=21>10:30</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=22>11:00</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=23>11:30</button>
            </div>  
        </div>

        <div class="layui-row">
            <div class="layui-btn-group">
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=24>12:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=25>12:30</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=26>13:00</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=27>13:30</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=28>14:00</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=29>14:30</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=30>15:00</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=31>15:30</button>
              <button type="button" class="layui-btn layui-btn-xs" data-index=32>16:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=33>16:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=34>17:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=35>17:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=36>18:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=37>18:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=38>19:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=39>19:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=40>20:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=41>20:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=42>21:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=43>21:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=44>22:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=45>22:30</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=46>23:00</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" data-index=47>23:30</button>
            </div>
          </div>
      </div>

    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">支付方式</label>
    <div class="layui-input-block">
      <select name="paymentMethod" title="">
        <option value="经费卡" selected="">经费卡</option>
        <option value="教学办">教学办</option>
        <option value="研究生经费">研究生经费</option>
        <option value="其他">其他</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">指导教师</label>
    <div class="layui-input-block">
      <input type="text" name="director" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">项目名称</label>
    <div class="layui-input-inline">
      <input type="text" name="projectName" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux" style="color: #ff1e4f;">*必填项</div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">项目代码</label>
    <div class="layui-input-inline">
      <input type="text" name="projectCode" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">*必填项</div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">项目类型</label>
    <div class="layui-input-block">
      <select name="projectType" title="">
        <option value="科研" selected="">科研</option>
        <option value="教学">教学</option>
      </select>
    </div>
  </div>

  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">实验内容</label>
    <div class="layui-input-block">
      <textarea name="experimentContent" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
    </div>
  </div>

  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">实验说明</label>
    <div class="layui-input-block">
      <textarea name="experimentNote" placeholder="要求:1.测试样品形状" lay-verify="required" class="layui-textarea"></textarea>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-verify="period" lay-submit="" lay-filter="apply">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

</form>


<script src="../../static/layui/layui.js" charset="utf-8"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
layui.use(['laydate', 'layer', 'form'], function(){
  var laydate = layui.laydate;
  var layer = layui.layer,$ = layui.jquery,form = layui.form;
  var period = new Array();
  var left = 0;
  var right = 47;
  for(i = 0; i < 48; i++)
  {
    period[i] = 0;
  }
  //直接嵌套显示
  laydate.render({
    elem: '#eDate'
    ,min: 0
    ,max: 7
    ,done: function(value, date, endDate){
      $('#eDate').change();
      $.ajax({
              url:"{% url 'student:get-apply-record-date' %}",
              data:{
                    eid: '{{eid}}',
                    eDate: value
                },
              dataType:'json',
              type:'post',
              success:function(data) {
                  console.log(data)
                  for(i in data)
                  {
                    console.log(data[i])
                    period[data[i]] = -1
                    $("button[data-index='" + data[i] + "']").addClass("layui-btn-disabled")
                  }
              }
          });
          return false;
    }
  });


  $("button").click(function(){
        var type = $(this).attr("class");
        var t = $(this).attr("data-index")
        if(type === "layui-btn layui-btn-xs")
        {
          period[t] = 1;
          $(this).addClass("layui-btn-warm");
          console.log(period);
        }else if(type === "layui-btn layui-btn-xs layui-btn-warm")
        {
          period[t] = 0;
          $(this).removeClass("layui-btn-warm");
          console.log(period);
        }
      });
  
  form.verify({
    period: function(){

      while(left < 48 && period[left] != 1) { left++; }
      while(right>=0 && period[right] != 1) { right--;}
      if(left <= right)
      {
        for(i = left; i <= right; i++)
        {
          if(period[i] != 1)
          {
            left = 0;
            right = 47;
            return "请选择连续的时间段"
            break;
          }
        }
      }else
      {
        left = 0;
        right = 47;
        return "请选择连续的时间段"
      }
  }
  });
  form.on('submit(apply)', function(data) {
    data.field["eid"]="{{eid}}";
    data.field["eBegin"]=left;
    data.field["eEnd"]=right;
    $.ajax({
        url:"{% url 'student:apply-update' %}",
        data:data.field,
        dataType:'json',
        type:'post',
        success:function(data) {
          if (data.code === 1){
            layer.msg('添加失败');
          }else if (data.code === 0){
            layer.msg('添加成功');
          }
          setTimeout(function() {
                location.href = "{% url 'student:home' %}";
            }, 500);
        }
    });
    return false;
  });

});


</script>

</body>
</html>